<template>
  <div id="task-edit">
    <!-- <div class="mui-input-row per-slider">
      <label>状态：</label>
      <div>
        <van-radio-group v-model="task_status">
          <van-radio name="1" >未完成</van-radio>
          <van-radio name="2" checked-color="#07c160">单选框 2</van-radio>
        </van-radio-group>
      </div>
    </div>-->
    <div class="mui-input-row per-slider">
      <label>进度：</label>
      <Slider v-model="progress" :progress="progress" @change="changeProgress" ref="silder"></Slider>
    </div>
    <div class="mui-input-row progress_info">
      <label>说明：</label>
      <textarea v-model="progress_info" rows="5" placeholder="更新进度说明"></textarea>
    </div>
    <div class="mui-button-row">
      <button type="button" class="mui-btn mui-btn-primary" @click="editTask()">提交</button>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import Slider from "../Slider";
import { RadioGroup, Radio, Toast } from "vant";

Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Slider);

export default {
  data() {
    return {
      task_id: "",
      message: "",
      progress: 30,
      task_status: "1",
      progress_info : "",
      task_progress : "",
      test : ""
    };
  },
  methods: {
    changeProgress : function(value){
      this.task_progress = value;
    },
    editTask: function() {
      if(this.task_progress == ""){
        Toast("未做改变");
        return false;
      }
      if(this.progress_info == ""){
        Toast("请填写更新进度说明");
        return false;
      }
      let upData = {
        task_progress : this.task_progress,
        stage_content : this.progress_info,
        task_id : this.task_id
      };
      this.$axios.post(this.$api.task.addStage,upData).then(res => {
        res = res.data;
        Toast(res.msg);
        if(res.code){
          this.$parent.initTask();
          this.$parent.initStage();
          this.$parent._data.taskEditShow = false;
        }
      });
    },
  },
  created() {
    this.task_id = this.$attrs.task_id;
    this.progress = this.$attrs.task_progress;
  }
};
</script>
<style>
#task-edit .per-slider {
  display: flex;
  flex-wrap: nowrap;
  padding-right: 20px;
}
#task-edit .per-slider label {
  line-height: 1.6;
}
#task-edit .progress_info label{
  width: 20%;
  padding-right: 0;
}
#task-edit .progress_info textarea{
  width: 75%;
}
</style>